<template>
  <div class="code_editor">
    <!-- ref="editor" -->
    <editor
      v-bind="$attrs"
      width="100%"
      :content="content"
      v-model="content"
      :options="{
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true,
                tabSize:2,
                fontSize:16,
                showPrintMargin:false,   //去除编辑器里的竖线
              }"
      :lang="'html'"
      theme="chrome"
      @init="editorInit"
    ></editor>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: "codeEditor",
  components: { editor: require('vue2-ace-editor') },
  data () {
    return {
    };
  },
  props: ['content'],

  methods: {
    editorInit () {
      require("brace/theme/chrome");
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/html");
      require("brace/mode/json");
      require("brace/snippets/json");
      require("brace/snippets/html");
      //   this.$refs.editor.editor.setShowFoldWidgets(true);
    },
  }
}
</script>
<style lang="less" scoped>
</style>